<template>
  <div class="alarmStatistics-root">
    <formTitleVue
      title="报警统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRingLinearColor domId="overview-alarmStatistics-echarts" height="24.6vh" :chartsData="chartsData" :myOption="echartsOption"
                          @titleClick="titleClick"/>
    <alarmDialog
      :dialogVisible="dialogVisible"
      :searchParams="searChForm"
      @close="titleClick(true)"
    ></alarmDialog>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRingLinearColor from '@/components/Echarts/myPieRingLinearColor.vue';
import { time_select_optios } from '@/utils/global.js';
import { riskHazardGradeStatistics
} from '@/api/risk/riskHazard'
import { alarmStatistics } from '@/api/alarm/statistics'
import alarmDialog from './alarmDialog.vue'
  export default {
  name: "alarmStatistics",
  components: {
    formTitleVue,myPieRingLinearColor,alarmDialog
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {
        yData: []
      },
      echartsOption:{

      },
      searChForm: {
        startTime: '',
        endTime: '',

      },
      dialogVisible:false
    };
  },
  methods: {
    titleClick(isClose){
      if(isClose){
        this.dialogVisible = false
        return
      }
      console.log("点击标题abc=====>")
      this.dialogVisible = true
    },
    selectChange(item) {
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData();
    },
    getData(){
      let params ={
        startTime:this.searChForm.startTime+" 00:00:00",
        endTime:this.searChForm.endTime+" 23:59:59"
      }
      params.areaCode = this.$store.state.account.user.deptIds
      alarmStatistics(params).then(r=>{
          if(r.code==200){
            let res = r.data.report
            this.chartsData.yData = [
              {
                name:"报警统计",
                radius: ["60%", "80%"],
                center: ["30%", "50%"],
                data: res
              }
            ]
            let total = 0
            this.chartsData.yData.forEach(item => {
              item.data.forEach(item => {
                item.label = {
                  normal:{
                    show: false,
                    formatter: "{b} {d}%",
                  }
                }
                item.labelLine = {
                  show: false,
                }
                total += item.value
              })
            })
            this.echartsOption = {
              title:{
                text: total,
                left: "29%",
                top: "38%",
                // textVerticalAlign:'top',
                textAlign:'center',
                textStyle: {
                  color: "#4293f6",
                  fontSize: this.$commonJs.adjustSize(30),
                  fontWeight: '500',
                },
                subtext: '总数',
                subtextStyle: {
                  verticalAlign:'top',
                  color: "#333333",
                  fontSize: this.$commonJs.adjustSize(20),
                  // fontWeight: '600',
                },
                triggerEvent: true
              },
              legend:{
                orient: 'vertical',
                top: 'middle',
                right: '10%',
                itemGap: this.$commonJs.adjustSize(10),
                // formatter: 'Legend {name}',
                // 使用回调函数
                formatter: function (name) {
                  for(let item2 of res){
                    if(item2.name == name){
                      // let p
                      // if(total == 0 || !item2.value){
                      //   p = 0
                      // }else{
                      //   p = (item2.value/total*100).toFixed(2)
                      // }
                      return `{name|${name}} {count|总数 ${item2.value}}`
                    }
                  }
                },
              },
              textStyle:{
                rich: {
                  name: {
                    fontSize: this.$commonJs.adjustSize(16),
                    width: this.$commonJs.adjustSize(70),
                    // padding: [10, 40, 10, 10],
                  },
                  count:{
                    color: '#83878b',
                    fontSize: this.$commonJs.adjustSize(16),
                    width: this.$commonJs.adjustSize(20),
                    // padding: [10, 10, 10, 10],
                  },
                }
              },
            }
          }
      })
    },
  },
  mounted() {
    this.selectChange("近一月");
  },
};
</script>

<style lang="scss" scoped>
.alarmStatistics-root {
  background-color: white;
  #echarts-types {
  
  }
}
</style>
